<!DOCTYPE html>
<html style="height: 100%;">
	<head>
		<meta charset="utf-8">
		<title>游戏主页</title>
		<script src="./js/jquery-1.12.4.js"></script>
		
		<!-- 引入uploader插件 -->
		<link rel="stylesheet" type="text/css" href="plugins/webuploader.css"/>
		<script type="text/javascript" src="plugins/webuploader.js"></script>
		
		<!-- 引入jquery-ui插件 -->
		<link rel="stylesheet" type="text/css" href="plugins/jquery-ui.min.css"/>
		<script type="text/javascript" src="plugins/jquery-ui-1.9.2.custom.min.js"></script>
		
		<script>
			//页面加载后触发
			$(function(){
				//直接初始化上传控件
				initWebUploader();
				
				//获取登录的用户凭证
				var nickName = localStorage.getItem("nickname");
				//获取头像
				var header = localStorage.getItem("header");
				//获取用户名
				var username = localStorage.getItem("username");
				//获取用户的欢乐豆数量
				var happyBean = localStorage.getItem("happyBean");
				
				
				//判断是否已经登录
				if(username == null){
					//强制跳转到登录页
					location.href="index.html";
				}
				
				//判断是否存在头像
				if(header != "null"){
					// alert(header)
					//替换掉默认头像
					$("#header").attr("src", "http://localhost:8080/img/getImg?imgName=" + header);
				}
				
				//设置欢乐豆
				$("#bean_number").html(happyBean);
				
				//替换昵称
				$("#nickname").html(nickName);
			});
			
			/**
			 * 初始化文件上传插件
			 */
			function initWebUploader(){
				
				// 初始化Web Uploader
				var uploader = WebUploader.create({
				    // 选完文件后，是否自动上传。
				    auto: true,
				    // swf文件路径
				    swf: 'plugins/Uploader.swf',
				    // 文件接收服务端。
				    server: 'http://localhost:8080/img/uploader',
				    // 选择文件的按钮。可选。
				    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
				    pick: '#filePicker',
					//上传图片时，额外携带的数据
					formData: {
						username: localStorage.getItem("username")
					}
				});
				
				//设置上传成功的回调
				uploader.on("uploadSuccess", function(file, response){
					// alert(response._raw);
					
					//更新本地的localStorage
					localStorage.setItem("header", response._raw);
					alert(response._raw)
					//更新头像地址
					$("#header").attr("src", "http://localhost:8080/img/getImg?imgName=" + response._raw);
				});
			}
			
			/**
			 * 注销
			 */
			function logout(){
				localStorage.removeItem("nickname");
				localStorage.removeItem("header");
				localStorage.removeItem("username");
				localStorage.removeItem("happyBean");
				
				//跳转到登录页面
				location.href="index.html";
			}
			
			/**
			 * iframe跳转到固定的页面
			 */
			function show_page(page){
				$("#iframe").attr("src", page);
			}
			
			/**
			 * 充值按钮 - 弹出一个弹窗
			 */
			function recharge(){
				//弹出框
				$("#mydialog").dialog({
					title: "欢乐豆充值",
					width: 400,
					height: 300
				});
			}
			
			/**
			 * 进行充值下单
			 */
			var orderId = null;
			function goRecharge(){
				//当前用户id
				var uid = localStorage.getItem("uid");
				//充值金额
				var money = $("#money").val();
				
				if(money == null || money.trim() == ""){
					alert("充值金额不能为null");
					return;
				}
				
				var zz = /^[0-9]*\.?[0-9]{0,2}$/; 
				if(!zz.test(money)){
					alert("金额类型不正确");
					return;
				}
				
				if(money <= 0){
					alert("充值金额必须大于0元");
					return;
				}
				
				//发送ajax - 下单
				$.ajax({
					type: "POST",
					url: "http://localhost:8080/order/create",
					data: {
						uid: uid,
						money: money
					},
					success: function(data){
						orderId = data;
						//将弹出框手动关闭
						$("#mydialog").dialog("close");
						
						//弹出一个支付成功的弹出框，让用户支付完成后点击
						$("#paydialog").dialog({
							title: "支付中",
							width: 400,
							height: 300
						});
						
						//打开一个新页签，进行支付宝支付
						window.open("http://localhost:8080/order/pay?orderid=" + data);
					}
				});
			}
			
			
			/**
			 * 支付结果的查询
			 */
			function payQuery(){
				// alert("查询支付结果的订单：" + orderId);
				
				//发送请求给后端，进行订单交易的查询
				$.ajax({
					type: "GET",
					url: "http://localhost:8080/pay/query",
					data: {
						orderid: orderId
					},
					success: function(data){
						//data > 0  支付成功  最新的欢乐豆数量
						//data -1 支付还未成功
						if(data > 0){
							//支付成功
							$("#paydialog").dialog("close");
							//更新浏览器保存的欢乐豆数量
							localStorage.setItem("happyBean", data);
						} else {
							//支付还未成功
							alert("交易未完成！");
						}
					}
				});
				
			}
		</script>
		<style>
			.body_class {
				background-color: antiquewhite;
				display: flex;
				flex-direction: row;
				width: 100%;
				height: 87%;
			}
			
			.left_div{
				width: 25%;
				height:97%;
				border-right: 1px solid black;
				/* background-color: aqua; */
				display: flex;
				flex-direction: column;
				padding: 20px;
			}
			
			.right_div{
				width: 75%;
				height: 100%;
				padding: 20px;
				/* background-color: blueviolet; */
			}
			
			.header_class {
				width: 100px;
				height: 100px;
				border-radius: 50%;
			}
			
			.update_header_btn{
				margin-left: 20px;
			}
			
			.nickname_span {
				margin-top: 20px;
			}
			
			.logout_btn{
				margin-top: 20px;
			}
			
			.menu_div {
				margin-top: 40px;
				display: flex;
				flex-direction: column;
				border-top: 1px solid #000000;
				width: 100%;
				height: 100%;
				justify-content: center;
			}
			
			.menu_div button {
				margin-top: 20px;
			}
			
			.iframe_class {
				width: 100%;
				height: 100%;
				border: 0px;
			}
		</style>
	</head>
	<body class="body_class">
		
		<div class="left_div">
			<!-- 头像 -->
			<div style="display: flex; flex-direction: row; align-items: center;">
				<img id="header" class="header_class" src="img/header.jpeg"/>
				<!-- <button class="update_header_btn">更新头像</button> -->
				
				<div id="filePicker" class="update_header_btn">更新头像</div>
			</div>
			
			<!-- 昵称 -->
			<span id="nickname" class="nickname_span">昵称</span>
			
			<div style="display: flex; flex-direction: row; align-items: center;margin-top: 20px;">
				<span>欢乐豆：<a id="bean_number">xxxx</a></span>
				<button class="update_header_btn" onclick="recharge()">充值</button>
			</div>
			
			<!-- 注销 -->
			<button onclick="logout()" class="logout_btn">注销</button>
			
			
			
			<!-----菜单区域------>
			<div class="menu_div">
				<button>创建房间</button>
				<button>加入房间</button>
				<button onclick="show_page('happybeanlist.html')">欢乐豆记录</button>
				<button onclick="show_page('orderlist.html')">订单记录</button>
			</div>
		</div>
		
		<div class="right_div">
			<iframe id="iframe" class="iframe_class" src="welcome.html" scrolling="no"></iframe>
		</div>
		
		
		<!-- 隐藏的div - 就是要弹出来的东西 -->
		<div id="mydialog" style="display: none;">
			<div style="width: 100%; height: 100%; display: flex; 
				flex-direction: column; justify-content: center;">
				<span>充值金额：<input id="money" placeholder="请输入充值金额"/></span>
				<span style="margin-top: 40px; color: red; font-weight: bold;">
					*充值1元兑换100欢乐豆
				</span>
				<button onclick="goRecharge()" style="margin-top: 40px;">去充值</button>
			</div>
		</div>
		
		<!-- 支付进行中...弹出框 -->
		<div id="paydialog" style="display: none;">
			<div style="width: 100%; height: 100%; 
				display: flex; 
				flex-direction: column; 
				align-items: center;
				justify-content: center;">
				<span>正在支付.....</span>
				<button onclick="payQuery()" style="margin-top: 40px;">支付已完成</button>
			</div>
		</div>
	</body>
</html>